<template class="">
	<!-- vue content -->
	<view class="" style="background-color: #ffffff;" :style="{'height':contentHeight+'px'}">
		<!-- <view class="match-width ver" style="position: fixed;left: 0;top: 0;z-index: 99999;">
			<view class="bg-black match-width match-height" style="opacity: 0.1;">
				<view class="status_bar"></view>
				<view style="height: 80rpx;"></view>
			</view>
			<view style="position: absolute;left: 0;top: 0;" class="match-width">
				<view class="status_bar"></view>
				<view class="match-width match-height"></view>
				<view style="height: 80rpx;position: relative;" class="hor ver-center match-width hor-center">
					<view class="pd-lr25  font-color-white" @click="onClickBack"
						style="line-height: 80rpx;position: absolute;left: 0;top: 0;">
						返回
					</view>
					<view class="font16 uni-bold font-color-white text-center line1" style="width: 50%;">
						登录</view>
				</view>
			</view>
		</view> -->
		<image src="" class="" style="width: 100vw;" mode="widthFix">
		</image>
		<view class="" style="width: 100vw;position: absolute;top: 0;left: 0;" :style="{'height':contentHeight+'px'}">
			<view class="ver match-width match-height ver-center">
				<view :style="{height:contentHeight*0.2+'px'}"></view>
				<image src="../../static/logo.png" style="height: 200rpx;width: 240rpx;"></image>
				<view class="match-width ver ver-center " style="" :style="{'margin-top':keyboardOpen?'0rpx':'20rpx'}">
					<!-- <image src='../../static/img/logo_256.png' style="width: 200rpx;height: 200rpx;"></image> -->
					<view style="" class="uni-bold" :style="{'font-size':keyboardOpen?'40rpx':'60rpx'}">
						{{titleName}}
					</view>
				</view>
				<view class="match-width ver ver-center hor-center">
					<!-- <view class="hor match-width hor-center  ver-center"
						:style="{'margin-top':keyboardOpen?'0rpx':'60rpx'}"
						v-if="platform==1||platform==2||platform==3">
						<view class="ver ver-center pd-tb10 pd-lr20" v-if="loginType==1" @click="loginType=1">
							<view class="font18 font-color-white uni-bold">微信登录</view>
							<view style="height: 1rpx;width: 150rpx;" class="bg-main"></view>
						</view>
						<view class="ver ver-center pd-tb10 font-color-white-light pd-lr20" v-if="loginType!=1"
							@click="loginType=1">
							<view class="font16 ">微信登录</view>
						</view>
						<view class="ver ver-center pd-tb10 pd-lr20" v-if="loginType==3" @click="loginType=3">
							<view class="font18 font-color-white uni-bold">手机号登录</view>
							<view style="height: 1rpx;width: 150rpx;" class="bg-main"></view>
						</view>
						<view class="ver ver-center pd-tb10 font-color-white-light pd-lr20" v-if="loginType!=3"
							@click="loginType=3">
							<view class="font16 ">手机号登录</view>
						</view>
					</view> -->
					<view class="match-width ver ver-center mg-t-20" v-show="loginType==1">
						<!-- <view style="height: 40rpx;"></view> -->

						<!-- <view
							class="corner100 gradient-bg font-color-white hor ver-center hor-center bg-shadow-gray-light2"
							style="height: 100rpx;width: 90%;" @click="clickLogin()" v-if="platform==5">
							<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
							</image>
							<view class="font18 font-color-white">{{getLoginText()}}</view>
						</view>
						<button open-type="getUserInfo" lang="zh_CN"
							class="corner100 gradient-bg font-color-white hor ver-center hor-center"
							@getuserinfo="onGotQQUserInfo" style="height: 100rpx;width: 90%;" v-else-if="platform==6">
							<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
							</image>
							<view class="font18 font-color-white">QQ登录</view>
						</button>
						<button open-type="getUserInfo"
							class="corner100 gradient-bg font-color-white hor ver-center hor-center"
							@click="loginDouYin()" style="height: 100rpx;width: 90%;" v-else-if="platform==7">
							<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
							</image>
							<view class="font18 font-color-white">抖音登录</view>
						</button>
						<button open-type="getUserInfo"
							class="corner100 gradient-bg font-color-white hor ver-center hor-center"
							@click="loginKuaiShou()" style="height: 100rpx;width: 90%;" v-else-if="platform==8">
							<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
							</image>
							<view class="font18 font-color-white">快手登录</view>
						</button>
						<view
							class="hor ver-center hor-center match-width gradient-bg corner100 font-color-white mg-t-40"
							style="width: 80%;" @click="clickLogin()" v-if="(platform==1||platform==2||platform==3)">
							<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
							</image>
							<view style="line-height: 80rpx;" class="mg-l-10">微信登录</view>
						</view>
						<button open-type="login"
							class="corner100 gradient-bg font-color-white hor ver-center hor-center" @login="loginBaiDu"
							style="height: 100rpx;width: 90%;" v-else-if="platform==9">
							<view class="font18 font-color-white">百度登录</view>
						</button>

						<view class="corner100 gradient-bg font-color-white hor ver-center hor-center"
							style="height: 100rpx;width: 90%;" @click="getWxUserProfile()" v-else-if="platform==4">
							<view class="font18 font-color-white">{{getLoginText()}}</view>
						</view>

						<view class="hor ver-center hor-center corner20 mg-t-20 bg-white"
							style="height: 80rpx; width: 80%" @click="onClickLoginApple" v-if="platform==2">
							<image src="https://expressionqiniu.luozisong.top/icon/mp/ic_apple.png"
								style="width: 35rpx;height: 35rpx;"></image>
							<view class="mg-l-20 font18">通过Apple登录</view>
						</view> -->


						<!-- <view class="hor ver-center hor-center match-width bg-white corner20 font-text-color-black mg-t-40"
						style="width: 80%;" @click="clickSimLogin()">
						<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
						</image>
						<view style="line-height: 80rpx;" class="mg-l-10">模拟登录</view>
					</view> -->
					</view>

					<view class="hor ver-center hor-center match-width corner10 font-color-white mg-t-40 bg-main"
						style="width: 80%;" @click="clickLogin()" v-if="(platform==1||platform==2||platform==3)">
						<image :src="getLoginIcon()" style="width: 60rpx;height: 60rpx;" class="pd-lr20 pd-tb10">
						</image>
						<view style="line-height: 80rpx;" class="mg-l-10">直接登录</view>
					</view>

					<button open-type="getPhoneNumber" style="height: 100rpx;width: 90%;"
						class="bg-main font-color-white" @getphonenumber="getPhoneNumber2"
						v-else-if="(platform==4||platform==5)">用手机号登录</button>

					<!-- <view v-if="loginType==3" class="ver match-width ver-center">
						<view class="hor ver-center mg-t-20" style="width: 80%;">
							<input class="font14 flex1 font-color-white corner10 pd-lr25"
								placeholder-style="color:#ffffff" style="background-color: #000000;height: 80rpx"
								@keyboardheightchange="onKeyboardHeightChange" placeholder="请输入手机号"
								onfocus="this.select()" type="number" v-model="account">
						</view>
						<view class="hor ver-center mg-t-40" style="width: 80%;">
							<input class="font14 flex1 font-color-white corner10 pd-lr25" confirm-type="done"
								placeholder-style="color:#ffffff" style="background-color: #000000;height: 80rpx"
								@keyboardheightchange="onKeyboardHeightChange" placeholder="请输入验证码"
								onfocus="this.select()" type="number" v-model="verifyCode">
							<view class="font14 font-color-white match-height mg-l-20" style="line-height: 80rpx;"
								@click="sendVerifyCode(maxSendTime)">{{sendCode}}</view>
						</view>
						<view class="corner100 gradient-bg font-color-white hor ver-center hor-center mg-t-40"
							style="width: 80%;line-height: 35px;" @click="onClickLoginByVerifyCode">
							登录
						</view>
					</view> -->
					<view class="hor match-width  hor-center ver-center mg-t-40" @click="onClickSelect"
						style="width:85%;">
						<image src="../../static/img/ic_checkbox_black.png" style="width: 40rpx;height: 40rpx;"
							class="pd-lr20 pd-tb10" v-if="!select"></image>
						<image src="../../static/img/ic_checkbox_black2.png" style="width: 40rpx;height: 40rpx;"
							class="pd-lr20 pd-tb10" v-if="select"></image>
						<view class="flex1">我已阅读并同意<span class="font-color-main"
								@click.stop="onClickProtocol(1)">《隐私保护指引》</span>

							<!-- <span class="font-color-blue-light" @click.stop="onClickProtocol(2)">《用户协议》</span> -->
						</view>
					</view>
					<view class="pd-b20"></view>
					<!-- <button open-type="getUserInfo" class="ver ver-center font-color-white font14 pd-lr25 pd-tb10 ">
					<image class="" style="" mode="aspectFit" src="@/static/img/ic_share.png"
						style="width: 40rpx;height: 40rpx;"></image>
					<view class="font14 font-color-white">分享</view>
				</button> -->

				</view>

			</view>
		</view>
		<!-- 内容 end -->
	</view>
</template>

<script>
	let _this
	export default {
		data() {
			return {
				contentHeight: 0,
				select: false,
				origin: 1, //应用内 2.登陆后直接发布
				auditStatus: 0,
				platform: 0,
				loginRes: null, //登录的返回信息

				titleName: "成都消防预约",
				loginType: 1, //1.微信登录 2.手机号登录 3.验证码登录
				//手机号登录
				account: "",
				verifyCode: "",
				sendCode: "获取验证码",
				maxSendTime: 120, //获取验证码的间隔
				sendTime: 0, //当前时间
				//一键登录
				showFastLogin: false,
				keyboardOpen: false //软键盘是否弹出
			};
		},
		onReady: function() {
			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					_this.contentHeight = windowHeight;

				}
			});
		},
		onLoad(option) {
			_this = this;
			this.initUser(option, this, false, 1, false)
			this.initPlatform()
			this.showLoginView = false;
			this.origin = option.origin;
			if (this.isEmpty(this.origin)) {
				this.origin = 1;
			}

			this.select = uni.getStorageSync('agreeProtocol');

			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		_this.titleName = res.appName
			// 	}
			// });

			if (this.platform == 4 || this.platform == 5 || this.platform == 6) {
				uni.showLoading({
					title: "信息处理中",
					mask: true
				})
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(JSON.stringify(res.provider))
						console.log("登录适配器")
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) { //得到微信的code码
									_this.loginRes = loginRes;
									console.log("登录结果：" + JSON.stringify(loginRes));
									uni.hideLoading();
								},
								fail: function(val) {
									console.log(JSON.stringify(val))
									uni.showToast({
										title: "登录失败" + val.errMsg,
										icon: "none",
										duration: 2000
									});

								}
							});
						} else {
							uni.hideLoading()
						}
					},
					fail: function(val) {
						console.log(JSON.stringify(val))
						uni.showToast({
							title: "适配器获取失败" + JSON.stringify(val),
							icon: "none",
							duration: 2000
						});
					}
				});
			} else if (this.platform == 1 || this.platform == 2) {
				uni.preLogin({
					provider: 'univerify',
					success() { //预登录成功
						// 显示一键登录选项
						_this.showFastLogin = true
					},
					fail(res) { // 预登录失败
						// 不显示一键登录选项（或置灰）
						// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
						console.log(res.errCode)
						console.log(res.errMsg)
						_this.showFastLogin = false
					}
				})
			}

		},
		onShow() { //页面恢复展示时
			_this = this;
			this.showLoginView = false;
		},
		methods: {
			getLoginText() { //根据平台获取登录的文本
				if (this.platform == 1 || this.platform == 2 || this.platform == 3 || this.platform == 5) {
					return "登录"
				}
				if (this.platform == 4) {
					return "一键登录"
				}
				if (this.platform == 6) {
					return "QQ登录"
				}
				return "登录"
			},
			getLoginIcon() {
				if (this.platform == 1 || this.platform == 2 || this.platform == 3 || this.platform == 5) {
					return "../../static/img/ic_wechat.png"
				}
				//微信登录不允许放微信的logo了
				// if (this.platform == 4) {
				// 	return "../../static/img/ic_wechat.png"
				// }
				if (this.platform == 6) {
					return "../../static/img/ic_qq.png"
				}
				if (this.platform == 7) {
					return "https://expressionqiniu.luozisong.top/icon/mp/ic_douyin.png"
				}
				if (this.platform == 8) {
					return "https://expressionqiniu.luozisong.top/icon/mp/ic_kuaishou.png"
				}
				return "../../static/logo.jpg"
			},
			onRefresh() { //回调了这个方法表示登录成功刷新页面的回调
				uni.showLoading({
					mask: true,
					title: "请求中"
				});
				setTimeout(function() {
					uni.hideLoading();
					// if (_this.origin == 2) { //跳转到发布页面
					// 	uni.redirectTo({
					// 		url: "../shop/publishInfo"
					// 	})
					// } else {
					// 	uni.reLaunch({
					// 		url: '../tabbar/home'
					// 	});
					// }
					_this.redirectToLastPage()

				}, 1000)

			},
			clickLogin() { //app使用的登录
				let _this = this
				if (!this.select) {
					uni.showToast({
						icon: "none",
						title: "请先同意协议"
					})
					return
				}
				this.showLog = true
				// // #ifdef  H5
				// this.login(this); //h5里登录内置的账号便于调试
				// // #endif

				// // #ifdef APP
				// this.loginWXInApp(function() {
				// 	uni.showToast({
				// 		title: "登录成功",
				// 		icon: "none",
				// 		duration: 2000
				// 	});
				// 	_this.redirectToLastPage()
				// })
				// // #endif

				// // #ifdef MP-QQ
				// this.loginInQQMP()
				// // #endif

				// // #ifdef MP-TOUTIAO
				// this.loginInDYMP()
				// // #endif

				this.getPhoneNumber2({
					detail: {
						code: "-1"
					}
				})

			},
			onClickProtocol(type) {
				uni.navigateTo({
					url: "protocol?type=" + type
				})
			},
			onClickSelect() {
				this.select = !this.select;
				uni.setStorageSync('agreeProtocol', this.select);
			},
			onGotQQUserInfo(e) {
				// console.log(e.detail)
				// 获取用户信息
				_this.loginInQQMP(e.detail, function() {
					uni.showToast({
						title: "登录成功",
						icon: "none",
						duration: 2000
					});
					// setTimeout(function() {
					_this.redirectToLastPage()
					// }, 2000)
				}, function() {
					uni.showToast({
						title: "登录失败",
						icon: "none",
						duration: 2000
					});
				})
			},
			getMpQQUserInfo() { //此方法为老式方法已弃用
				// 可以通过 qq.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
				qq.getSetting({
					success(res) {
						// console.log(JSON.stringify(res))
						if (!res.authSetting['scope.userInfo']) {
							qq.authorize({
								scope: 'scope.userInfo',
								success() {
									// 获取用户信息
									_this.loginInQQMP(function() {
										uni.showToast({
											title: "登录成功",
											icon: "none",
											duration: 2000
										});
										// setTimeout(function() {
										_this.redirectToLastPage()
										// }, 2000)
									}, function() {
										uni.showToast({
											title: "登录失败",
											icon: "none",
											duration: 2000
										});
									})
								}
							})
						} else {
							// 获取用户信息
							_this.loginInQQMP(function() {
								uni.showToast({
									title: "登录成功",
									icon: "none",
									duration: 2000
								});
								// setTimeout(function() {
								_this.redirectToLastPage()
								// }, 2000)
							}, function() {
								uni.showToast({
									title: "登录失败",
									icon: "none",
									duration: 2000
								});
							})
						}
					}
				})
			},
			loginDouYin() {
				// 获取用户信息
				_this.loginInDYMP(function() {
					uni.showToast({
						title: "登录成功",
						icon: "none",
						duration: 2000
					});
					// setTimeout(function() {
					_this.redirectToLastPage()
					// }, 2000)
				}, function() {
					uni.showToast({
						title: "登录失败",
						icon: "none",
						duration: 2000
					});
				})
			},
			loginKuaiShou() {
				// 获取用户信息
				_this.loginInKSMP(function() {
					uni.showToast({
						title: "登录成功",
						icon: "none",
						duration: 2000
					});
					// setTimeout(function() {
					_this.redirectToLastPage()
					// }, 2000)
				}, function() {
					uni.showToast({
						title: "登录失败",
						icon: "none",
						duration: 2000
					});
				})
			},
			loginBaiDu() {
				console.log("点击登录")
				// 获取用户信息
				_this.loginInBDMP(function() {
					uni.showToast({
						title: "登录成功",
						icon: "none",
						duration: 2000
					});
					// setTimeout(function() {
					_this.redirectToLastPage()
					// }, 2000)
				}, function() {
					uni.showToast({
						title: "登录失败",
						icon: "none",
						duration: 2000
					});
				})
			},
			getWxUserProfile() { //小程序中获取到用户信息后
				if (!this.select) {
					uni.showToast({
						icon: "none",
						title: "请先同意协议"
					})
					return
				}
				if (this.loginRes == null) { //未获取到信息的时候刷新本页
					uni.showToast({
						icon: "none",
						title: "登录信息为空"
					})
					setTimeout(function() {
						uni.redirectTo({
							url: "/pages/login/login",
						})
					}, 1000)
					return
				}
				uni.getUserProfile({
					desc: "用于完善会员资料",
					lang: "zh_CN",
					success: function(infoRes) {
						console.log('获取用户信息：' + JSON.stringify(infoRes));
						_this.loginInWxMP(_this.loginRes.code, infoRes, function() {
								uni.showToast({
									title: "登录成功",
									icon: "none",
									duration: 2000
								});
								setTimeout(function() {
									// uni.reLaunch({
									// 	url: "../tabbar/home"
									// })
									_this.redirectToLastPage()
								}, 2000)
							},
							function() {
								console.log("登录失败")
							})
					},
					fail: function(res) {
						console.log("获取用户信息错误：", res)
					}
				});

			},
			onClickLoginApple() {
				if (!this.select) {
					uni.showToast({
						icon: "none",
						title: "请先同意协议"
					})
					return
				}
				this.loginApple(function() {
					uni.showToast({
						title: "登录成功",
						icon: "none",
						duration: 2000
					});
					_this.redirectToLastPage()
				})
			},
			clickSimLogin() {
				this.login(this); //h5里登录内置的账号便于调试
			},
			onClickLoginByVerifyCode() {
				if (this.isEmpty(this.account)) {
					uni.showToast({
						title: "请填写手机号",
						icon: "none",
						duration: 2000
					});
					return
				}
				if (this.isEmpty(this.verifyCode)) {
					uni.showToast({
						title: "请填写验证码",
						icon: "none",
						duration: 2000
					});
					return
				}
				if (!this.select) {
					uni.showToast({
						icon: "none",
						title: "请先同意协议"
					})
					return
				}
				//验证码登录
				this.loginByVerifyCode(this.account, this.verifyCode, this)
			},
			sendVerifyCode(time) { //发送验证码
				if (this.isEmpty(this.account)) {
					uni.showToast({
						title: "请填写手机号",
						icon: "none",
						duration: 2000
					});
					return
				}
				if (_this.sendTime == 0) { //未发送
					_this.sendRequest({
						url: "api/auth/user/sendVerifyCode",
						data: {
							phone: _this.account
						},
						page: _this,
						success: function(res) {
							console.log(res)
							uni.showToast({
								title: "短信发送成功",
								icon: "none",
								duration: 2000
							});
							_this.updateCodeTime(time);
						},
						codeFail: function(e) {},
						fail: function(e) {
							uni.showToast({
								title: "短信发送失败",
								icon: "none",
								duration: 2000
							});
						}
					})
				} else {
					_this.$toast('短信已发送');
				}
			},
			updateCodeTime(time) {
				let _this = this;
				_this.sendTime = time - 1;
				_this.sendCode = "重发(" + _this.sendTime + ")"
				if (_this.sendTime == 0) {
					_this.sendCode = "重发验证码"
				} else {
					setTimeout(function() {
						_this.updateCodeTime(_this.sendTime)
					}, 1000)
				}
			},
			clickFastLogin() {
				uni.login({
					provider: 'univerify',
					univerifyStyle: { // 自定义登录框样式
						//参考`univerifyStyle 数据结构`
					},
					success(res) { // 登录成功
						console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
					},
					fail(res) { // 登录失败
						console.log(res)
						console.log(res.errMsg)
						uni.showModal({
							content: "APP版本太老，登录失败，请更新APP或更换登录方式",
							showCancel: false
						})
						_this.loginType = 3
					}
				})

			},
			onKeyboardHeightChange(e) {
				// console.log(e)
				try {
					if (e.target.height > 50) {
						this.keyboardOpen = true
					} else {
						this.keyboardOpen = false
					}
				} catch (e) {

				}

			},
			onClickBack() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: "/pages/tabbar/home"
					})
				}

			},
			getPhoneNumber2(e) {
				if (!this.select) {
					uni.showToast({
						icon: "none",
						title: "请先同意协议"
					})
					return
				}
				console.log(e)
				console.log(_this.loginRes)
				this.test = JSON.stringify(e.detail)
				_this.loginInWxMP(e.detail.code, _this.loginRes, function(authUser) {
						uni.showToast({
							title: "登录成功",
							icon: "none",
							duration: 2000
						});
						setTimeout(function() {
							// uni.reLaunch({
							// 	url: "../tabbar/home"
							// })
							_this.redirectToLastPage()
						}, 2000)
					},
					function() {
						console.log("登录失败")
						fail()
					})
			},
		}
	};
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}

	.black-gradient-ver {
		background-image: linear-gradient(transparent, #172143, #172143);
	}
</style>